<template>
  <div class="mine-mypage">
    <!-- 背景 -->
    <div class="bg">
      <!-- 个人资料卡片 -->
      <div class="card">
        <!-- 头 -->
        <div class="headers">
          <!-- 头像 -->
          <div class="img">
            <img src="/favicon.ico" alt="" />
          </div>
          <!-- 编辑资料 -->
          <div class="edit">编辑资料</div>
          <!-- 申请认证 -->
          <div class="authentication">申请认证</div>
        </div>
        <!-- 身体 -->
        <div class="body">
          <!-- 名字  性别 -->
          <div class="top">
            <div class="username">内裤大叔</div>
            <div class="gender">
              <div class="icon">┃</div>
              <div class="sex">男</div>
            </div>
          </div>
          <!-- 数据   个签   地址|更多信息 -->
          <div class="main">
            <div class="data">
              <div class="head">
                <span>71</span>
                头条
              </div>
              <div class="get">
                <span>708</span>
                获赞
              </div>
              <div class="floowing">
                <span>170</span>
                粉丝
              </div>
              <div class="watch">
                <span>72</span>
                关注
              </div>
            </div>
            <div class="sign">一心只想做出好的游戏视频</div>
            <div class="address">
              IP属地：
              <span> 重庆 </span>
              <div class="abc"></div>
              <div class="more">更多信息</div>
            </div>
          </div>
          <!-- 标签 -->
          <div class="tag">
            <div class="active">全部</div>
            <div>头条</div>
            <div>微头条</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.mine-mypage {
  // 背景
  .bg {
    height: 100vh;
    background-color: @background-grey-f2;
    padding: 150px 0;

    // 资料卡
    .card {
      height: calc(100vh - 150px);
      background-color: #fff;
      position: relative;
      border-radius: 9px;
      // 标签
      .tag {
        display: flex;
        position: absolute;
        top: 40%;
        padding: 0 30px;
        width: 100%;
        height: 35px;
        justify-content: space-around;
        border-bottom: 1px solid #f2f2f2;
        .active {
          border-bottom: 2px solid @font-red-f8;
        }
      }
      //   个人信息
      .main {
        position: absolute;
        top: 20%;
        left: 20px;
        width: 80%;
        padding: 10px 10px;
        font-size: 14px;
        // 地址
        .address {
          position: absolute;
          top: 60px;
          display: flex;
          align-items: center;
          //   小细线
          .abc {
            width: 2px;
            height: 13px;
            margin-left: 15px;
            margin-right: 15px;
            background-color: #f2f2f2;
          }
        }
        // 签名
        .sign {
          position: absolute;
          top: 35px;
        }
        // 数据
        .data {
          position: absolute;
          display: flex;
          justify-content: space-around;
        }
      }
      //   用户名  性别
      .top {
        position: absolute;
        top: 13%;
        display: flex;
        padding: 0 30px;
        align-items: center;
        // 用户名称
        .username {
          font-size: 20px;
          font-weight: 700;
        }
        // 性别
        .gender {
          display: flex;
          margin-left: 10px;
          align-items: center;
          width: 30px;
          height: 15px;
          background-color: #f2f2f2;
          padding: 0 5px;
          border-radius: 3px;
          .icon {
            font-size: 12px;
          }
          .sex {
            font-size: 12px;
          }
        }
      }
      //   头像div
      .img {
        position: absolute;
        top: -30px;
        left: 30px;
        width: 90px;
        height: 90px;
        background-color: black;
        border-radius: 50%;
        border: 2px solid white;
        overflow: hidden;
        // 头像图片
        img {
          width: 100%;
        }
      }
      //   编辑资料
      .edit {
        position: absolute;
        left: 45%;
        top: 5%;
        background-color: #fff;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #f2f2f2;
        border-radius: 6px;
      }
      //   申请认证
      .authentication {
        position: absolute;
        left: 70%;
        top: 5%;
        color: white;
        background-color: @font-red-f8;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0);
      }
    }
  }
}
</style>